<template>
<!-- 笔记 -->
  <div id="notes">
    <div class="noteContent">
      <div class="notesType" @click="notesTypeClick">
        <span :class="notesClick? 'notesTypeClick' : ''">笔记</span>
        <span :class="draftClick? 'notesTypeClick' : ''">草稿箱</span>
      </div>
      <div class="notesBody">
	        <div class="notesTitle">
            <span class="notesTitleT">文章标题：差一点就上台去帮他挡一下，才发现是自己看错了<span class="draftFont" v-if="draftFontShow">草稿</span></span>
            <span>【<span>158</span>条笔记】</span>
          </div>
          <p class="notesDate">2012-12-08</p>
          <div class="notesContainer">
            <p>1</p>
            <p class="notesContent">摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
	    </div>
      <div class="notesBody">
	        <div class="notesTitle">
            <span class="notesTitleT">文章标题：差一点就上台去帮他挡一下，才发现是自己看错了</span>
            <span>【<span>158</span>条笔记】</span>
          </div>
          <p class="notesDate">2012-12-08</p>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
	    </div>
      <div class="notesBody">
	        <div class="notesTitle">
            <span class="notesTitleT">文章标题：差一点就上台去帮他挡一下，才发现是自己看错了</span>
            <span>【<span>158</span>条笔记】</span>
          </div>
          <p class="notesDate">2012-12-08</p>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
          <div class="notesContainer">
            <p>1</p>
            <p>摘要：差一点就上台去帮他挡一下，才发现是自己看错了如果一个孩子，要面临那么多的危险，长大</p>
            <div class="ncIcon" @click="ncIconClick">
              <i>1</i>
              <div class="ncIconBut" v-if="ncIconButShow">
                <i></i>
                <i class="delet"></i>
              </div>
            </div>
          </div>
          <b class="line"></b>
	    </div>
      <div class="Paging">
        <Paging></Paging>
      </div>
      <div class="notesMove">
        <nodesMove></nodesMove>
      </div>
    </div>
  </div>
</template>

<style>
   @import "../../../../../static/knowChilde/notes.css";
</style>

<script>
// 分页
import Paging from '@/components/public/paging'
// 查看更多笔记
import nodesMove from '@/components/notes/notesMove'

export default {
  data () {
    return {
      notesClick: true,
      draftClick: false,
      ncIconButShow: false,
      draftFontShow: false
    }
  },
  mounted: function () {},
  methods: {
    notesTypeClick: function (e) {
      var html = e.target.innerHTML
      if (html === '笔记') {
        this.notesClick = true
        this.draftClick = false
      } else if (html === '草稿箱') {
        this.notesClick = false
        this.draftClick = true
      }
    },
    ncIconClick: function () {
      if (this.ncIconButShow) {
        this.ncIconButShow = false
      } else {
        this.ncIconButShow = true        
      } 
    } 
  },
  components: {
    'Paging': Paging,
    'nodesMove': nodesMove
  }
}
    
</script>

